<template>
    <div class="nav">
        <div class="topper">
            <van-nav-bar
            title="设置"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="systemPlate">
            <van-cell title="清楚缓存" is-link value="36.31M" />
            <van-cell title="版本号" is-link value="V6.6.96" />
            <van-cell title="关于医鹿" is-link />
            <van-cell title="检查更新"/>
            <van-cell title="求好评" is-link />
        </div>
        <div class="messagePlate">
            <van-cell title="消息通知管理" is-link />
            <van-cell title="隐私" is-link />
            <van-cell title="账号安全" is-link />
            <van-cell title="个信息共享清单" is-link />
            <van-cell title="个人信息采集清单" is-link />
            <van-cell title="安全提醒" is-link />
        </div>
        <div class="monitor">
            <div>
                <span>监护人认证</span>
                <span>确保未成年人信息和就医安全，应进行转账实名认证</span>
            </div>
            <van-button round type="success">立即认证</van-button>
        </div>
        <div class="exit">
            <van-button type="primary" to="login">退出登录</van-button>
        </div>
    </div>
    
</template>

<script lang="ts" scoped>
    export default {
        setup() {
            const onClickLeft = () => history.back();
            return {
              onClickLeft,
            };
        },
    }
</script>

<style lang="less" scoped>
.nav{
    background-color: rgb(241, 249, 249);
}
.topper{
:deep(.van-icon-arrow-left:before){
    color: black;
    font-size: 20px;
}
:deep(.van-nav-bar__title){
    color: rgb(60, 59, 59);
    font-size: 18px;
    font-weight: 500;
}
}
.systemPlate{
    margin-bottom: 10px;
}
.messagePlate{
    margin-bottom: 10px;
}
.monitor{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    background-color: white;
    padding: 15px;
    div{
    display: flex;
    flex-direction: column;
    span:nth-child(1){
        font-size: 14px;
        font-weight: 500;
        color: rgb(30, 29, 29);
        margin-bottom: 6px;
    }
    span:nth-child(2){
        font-size: 10px;
        font-weight: 500;
        width: 230px;
        color: rgb(133, 130, 130);
    }
    }
    :deep(.van-button--normal){
        margin-top: 15px;
        height: 30px;
        background-color: rgb(169, 240, 240);
        border: 0;
    }
}
.exit{
    display: flex;
    justify-content: center;
    :deep(.van-button--normal){
        border-radius: 10%;
        width: 300px;
        border-radius: 20px;
        background-color: red;
        border: 0;
    }
}

</style>
